<template>
  <a-drawer
    title="作废调整"
    :maskClosable="true"
    :visible="visible"
    :width="$store.getters.isMobile ? 350 : 600"
    :body-style="{ paddingBottom: '80px' }"
    @close="onCancel"
  >
    <a-form layout="vertical">
      <a-form-item
        label="作废调整时间"
        v-bind="validateInfos.cancel_adjust_date"
      >
        <a-date-picker
          class="w-100p"
          v-model:value="modelRef.cancel_adjust_date"
          :valueFormat="dateFormatStr"
        />
      </a-form-item>
    </a-form>
    <div class="drawer-footer">
      <a-space>
        <a-button @click.prevent="onCancel">取消</a-button>
        <a-button type="primary" @click.prevent="onSubmit"> 确定 </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import { defineComponent, reactive, ref, watch } from "vue";
import request from "../../../../common/utils/request";
import store from "../../../../store";
import moment from "moment";
import { Form, message } from "ant-design-vue";
const useForm = Form.useForm;

const dateFormatStr = "YYYY-MM-DD";

export default defineComponent({
  name: "RemoveAdjust",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
    billId: {
      type: [Number, String],
      default: 0,
    }
  },
  setup(props, context) {
    const today = moment();

    const modelRef = reactive({
      cancel_adjust_date: today,
    });
    const ruleRef = reactive({
      cancel_adjust_date: [{ required: true, message: "必选" }],
    });

    const { resetFields, validate, validateInfos } = useForm(modelRef, ruleRef);
    const onCancel = () => {
      context.emit("cancel");
    };

    const onSubmit = () => {
      let params = {
        bill_id: store.getters.billMatchAccountDetail.bill_id || props.billId,
        adjust_id: props.id,
        ...modelRef,
        needMsg: true,
      };
      params.cancel_adjust_date = moment(params.cancel_adjust_date).format(
        dateFormatStr
      );
      validate().then(() => {
        request
          .get("/org", "/bill/cancelAdjust", {
            ...params,
          })
          .then((res) => {
            message.success(res.msg || "操作成功！");
            context.emit("success");
          });
      });
    };

    watch(
      () => props.visible,
      (val) => {
        resetFields();
      }
    );

    return {
      dateFormatStr,
      modelRef,
      validateInfos,
      onCancel,
      onSubmit,
    };
  },
});
</script>
